import Image from "next/image";
import MobileLayout from "../../components/layout/MobileLayout";
import styles from "./page.module.css";

export default function ActivityPage() {
  // 模拟活动数据
  const activities = [
    {
      id: 1,
      title: "温情早餐",
      time: "07:30 至 9:30 开放",
      area: "美食区",
      image: "/activities/breakfast.svg"
    },
    {
      id: 2,
      title: "美食街活动",
      time: "09:30 至 11:00 开放",
      area: "美食区",
      image: "/activities/food-street.svg"
    },
    {
      id: 3,
      title: "欢乐儿童乐园: 儿童托管中心",
      time: "13:00 至 17:30 开放",
      area: "娱乐区",
      image: "/activities/kids.svg"
    },
    {
      id: 4,
      title: "亲子烘焙",
      time: "13:00 至 17:30 开放",
      area: "美食区",
      image: "/activities/baking.svg"
    },
    {
      id: 5,
      title: "主题电影院",
      time: "13:00 至 17:30 开放",
      area: "娱乐区",
      image: "/activities/cinema.svg"
    }
  ];

  // 日期数据
  const weekDays = [
    { day: "一", date: 1, hasNew: false, hasActivity: true },
    { day: "二", date: 2, hasNew: true, hasActivity: false },
    { day: "三", date: 3, hasNew: false, hasActivity: true },
    { day: "四", date: 4, hasNew: true, hasActivity: false },
    { day: "五", date: 5, hasNew: true, hasActivity: false },
    { day: "六", date: 6, hasNew: false, hasActivity: false },
    { day: "日", date: 7, hasNew: false, hasActivity: false }
  ];

  return (
    <MobileLayout>
      <div className={`${styles.activityPage}`}>
        {/* 日期选择器 */}
        <div className={`${styles.dateSelector}`}>
          <div className={`${styles.dateHeader}`}>
            <div className={`${styles.currentDate}`}>2020/12/30</div>
            <div className={`${styles.myAttention} transition-all hover-scale`}>我的关注</div>
          </div>
          
          <div className={`${styles.weekDays}`}>
            {weekDays.map((day, index) => (
              <div 
                key={index} 
                className={`${styles.dayItem} ${index === 0 ? styles.active : ''} transition-all hover-lift`}
              >
                <div className={`${styles.weekDay} transition-all`}>{day.day}</div>
                <div className={`${styles.date} transition-all`}>{day.date}</div>
                {day.hasNew && <div className={`${styles.newBadge}`}>新</div>}
                {day.hasActivity && <div className={`${styles.activityBadge}`}>活动</div>}
                {index === 0 && <div className={`${styles.activeMark}`}>-</div>}
              </div>
            ))}
          </div>
        </div>

        {/* 活动列表 */}
        <div className={`${styles.activityList}`}>
          {activities.map((activity, index) => (
            <div 
              key={activity.id} 
              className={`${styles.activityCard} transition-all hover-lift hover-shadow`}
            >
              <div className={`${styles.activityImage}`}>
                <Image 
                  src={activity.image} 
                  alt={activity.title} 
                  width={120} 
                  height={80} 
                  className="transition-transform hover-scale"
                />
              </div>
              <div className={`${styles.activityInfo}`}>
                <h3 className={`${styles.activityTitle}`}>{activity.title}</h3>
                <div className={`${styles.activityTime}`}>{activity.time}</div>
                <div className={`${styles.activityArea}`}>{activity.area}</div>
              </div>
              <div className={`${styles.favoriteButton} transition-all hover-scale`}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="transition-all">
                  <path d="M16.5 3C14.76 3 13.09 3.81 12 5.09C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5C2 12.28 5.4 15.36 10.55 20.04L12 21.35L13.45 20.03C18.6 15.36 22 12.28 22 8.5C22 5.42 19.58 3 16.5 3ZM12.1 18.55L12 18.65L11.9 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 5.99 11.07 7.36H12.94C13.46 5.99 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55Z" fill="#999"/>
                </svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </MobileLayout>
  );
}